<template>
  <div id="app">
    <Tabber :key="topbarkey"></Tabber>
    <Header></Header>
    <router-view @updateKey='updateKeyFn'/>
     <div>vuex:{{isShowModal}}</div>
    <Fotter></Fotter>
    <Login v-show="isShowModal"></Login>
    <transition name="slide">
    <Toast v-show="isShowToast"></Toast>
     </transition>
  </div>
</template>
<script>
import Tabber from './components/Tobbar.vue';
import Header from './components/Header.vue';
import Fotter from './components/Fotter.vue';
import Login from './components/Login.vue';
import Toast from './components/Toast.vue';
// import axios from 'axios'
// import axios from './request/request'
import {JingPinAPI,ReMenAPI} from './request/api'
import {mapState} from 'vuex'


export default {
  data () {
    return {
      topbarkey:0,  
    }
  },
  components: {
    Tabber,
    Header,
    Fotter,
    Login,
    Toast
  },
 async created () {
    console.log('开始请求数据');
    // axios
    // .get('http://kumanxuan1.f3322.net:8881/cms/products/recommend')
    // .then((res)=>{
    //   console.log('数据为',res);
    // })
    // 封装请求
    //  axios
    // .get('/products/recommend')
    // .then((res)=>{
    //   console.log('数据为',res);
    // })
    // 

    //      JingPinAPI().then((res) => {
    //   console.log("精品数据为", res);
    // });
    // ReMenAPI().then((res) => {
    //   console.log("热门数据为", res);
    // });

    // 解决回调地狱
        let res =await JingPinAPI();
        console.log('1',res);
        console.log('2');
        let res2=await ReMenAPI()
        console.log('3',res2);
        console.log('4');
  },
  computed: {
    ...mapState({
      isShowModal:(state)=>state.showModal.isShowModal,
      isShowToast:state=>state.showToast.isShowToast
    })
  },
   methods: {
    updateKeyFn(){
      this.topbarkey++
    }
  },
    watch:{
    "$route.path":{
      handler(newVal,oldVal){
        console.log('地址变化了');
        if(oldVal !='/'){
          this.topbarkey++;
        }
      }
    }
  }
}
</script>
<style lang="less">
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
